<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Dialog 对话框"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="插件用法">
      <hips-button
        block
        type="primary"
        @click="showDialog"
      >
        普通Alert
      </hips-button>

      <br>
      <hips-button
        block
        type="primary"
        @click="showDialog1"
      >
        不带右上角关闭Alert
      </hips-button>

      <br>
      <hips-button
        block
        type="primary"
        @click="showDialog2"
      >
        普通Confirm
      </hips-button>

      <br>
      <hips-button
        block
        type="primary"
        @click="showDialog3"
      >
        失效Confirm
      </hips-button>

      <br>
      <hips-button
        block
        type="primary"
        @click="showDialog4"
      >
        异步Confirm
      </hips-button>
    </demo-block>

    <demo-block title="标签用法">
      <hips-button
        block
        type="warning"
        @click="visible = true"
      >
        普通Alert
      </hips-button>
      <hips-dialog
        v-model="visible"
        title="提示"
        content="这里是弹出框标签"
        ok-text="确定"
        @dialog:ok="handleOk"
      />
    </demo-block>

    <demo-block
      title="高级用法"
      class="advance-dialog"
    >
      <hips-button
        block
        type="danger"
        @click="visible1 = true"
      >
        自定义弹框
      </hips-button>
      <hips-dialog
        v-model="visible1"
        @dialog:ok="handleOk"
      >
        <div
          slot="title"
          class="header"
        >
          Custom title
        </div>
        <div
          slot="content"
          class="content"
        >
          Custom content
        </div>
        <div
          slot="footer"
          class="footer"
        >
          Custom footer
        </div>
      </hips-dialog>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Button } from '@hips/vue-ui';

export default {
  components: {    
    [Button.name]: Button,
  },
  mixins: [ BasicView ],
  data() {
    return {
      visible: false,
      visible1: false,
    };
  },

  methods: {
    getBasicOptions() {
      return {
        title: '提示',
        content: '这里是弹出框插件',
        okText: '确定',
        cancelText: '取消',
        showCancelButton: true,
        onOk: () => {},
        onCancel: () => {},
      };
    },

    showDialog() {
      this.$hips.dialog.alert({
        ...this.getBasicOptions(),
      });
    },

    showDialog1() {
      this.$hips.dialog.alert({
        ...this.getBasicOptions(),
        closable: false,
      });
    },

    showDialog2() {
      this.$hips.dialog.confirm({
        ...this.getBasicOptions(),
        destroyOnClose: true,
      });
    },

    showDialog3() {
      this.$hips.dialog.confirm({
        ...this.getBasicOptions(),
        confirmDisable: true,
      });
    },

    showDialog4() {
      this.$hips.dialog.confirm({
        ...this.getBasicOptions(),
        asyncClose: true,
        onOk: () => {
          setTimeout(() => {
            this.$hips.dialog.close();
            this.$hips.toast('close');
          }, 2000);
        },
      });
    },

    handleOk() {},
  },
};
</script>

<style lang="stylus">
.demo-dialog
  .van-doc-demo-block
    padding: 0 15px
    .van-doc-demo-block__title
      padding-left: 0

  .advance-dialog
    .hips-icon
      color: white
    .hips-dialog
      .header
        background: red
        padding 20px
      .content
        background: green
        padding 20px
      .footer
        background: orange
        padding 10px
        width 100%
        text-align center
    .hips-dialog__title,
    .hips-dialog__content,
    .hips-dialog__footer
      padding 0
      color white
</style>
